<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html,body{
            background: url(/static/images/_bg.jpg);
        }
        *{
            box-sizing: initial;
        }
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        input:focus {
            outline: 0;
        }
        .box{
            width: 873px;
            margin: 3% auto 0 auto;
        }
        .top{
            width: 873px;
            height: 222px;
            background: url(/static/images/_loginTop.jpg) no-repeat;
        }
        .boxBg{
            width: 413px;
            padding-left: 460px;
            height: 136px;
            background: url(/static/images/_loginbox.jpg) no-repeat;
        }
        .formlist>li{
            padding-top: 13px;
        }
        .formlist>li>.inp{
            width: 205px;
            line-height: 25px;
            font-size: 15px;
            font-weight: bold;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            color: #fff3df;
            background: #341509;
            border: 0 none;
        }
        .bottom{
            width: 417px;
            padding-left: 456px;
            height: 319px;
            background: url(/static/images/_loginBottom.jpg) no-repeat;
        }
        .bottom>.btn{
            width: 120px;
            height: 34px;
            background: url(/static/images/_login_btn.jpg) no-repeat;
            border: 0 none;
            cursor: pointer;
        }
        .bottom>.btn:hover{
            background-position: 0px -37px;
        }
        .code{
            vertical-align: middle;
            height: 28px;
            margin: -4.5px 0px 0px -67px;
            z-index: 999;
        }
    </style>
</head>
<body>
    <div>
        <div class="box">
            <form method="post" enctype="application/x-www-form-urlencoded">
                <div class="top"></div>
                <div class="boxBg">
                    <ul class="formlist clearfix">
                        <li><input type="text" class="inp" name="name" tabindex="1" id="account" /></li>
                        <li><input type="password" class="inp" name="password" tabindex="2"  id="passwords" /></li>
                        <li><input type="text" class="inp" id="code" name="code" maxlength="4" tabindex="3" /><img class="code" alt="验证码" title="图片看不清？点击重新得到验证码" id="codeImg" onclick="this.src='/code?'+Math.random()" /></li>
                    </ul>
                </div>
                <div class="bottom">
                    <input type="submit" class="btn" value="" />
                </div>
            </form>
        </div>
    </div>
    <script>

        window.localStorage.clear();
        function test() {
            location.href = location.href.replace('/login', '/test');
        }

        function register() {
            location.href = location.href.replace('/login', '/register');
        }
        //动态验证码
        function code() {
            var codeImg = document.getElementById('codeImg'), m = Math.random();
            codeImg.src = '/code?' + m;
        }
        window.onload = function () {
            code();
        }

    </script>
</body>
</html>